<%--
  Created by IntelliJ IDEA.
  User: PC
  Date: 2024/12/19 019
  Time: 22:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Test.jsp</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>
        <script type="text/javascript">
            function test() {
                // 原生Ajax
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "${pageContext.request.contextPath}/user/jsonObjectThree", true);
                xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                xhr.send('{"id": 1, "username": "张三", "birthday": "1999-12-31"}');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        alert(xhr.responseText);
                    }
                }
            }

            // jQuery Ajax
            <%--$(function () {--%>
            <%--    $("#btn").click(function () {--%>
            <%--        alert("点击了按钮");--%>
            <%--        var user = {"id": 111, "name": "李刚", "birthday": "1999-11-11"};--%>
            <%--        $.ajax({--%>
            <%--            url: "${pageContext.request.contextPath}/user/jsonObjectThree",--%>
            <%--            type: "post",--%>
            <%--            contentType: "application/json;charset=UTF-8",--%>
            <%--            data: JSON.stringify(user),--%>
            <%--            dataType: "json",--%>
            <%--            success: function (data) {--%>
            <%--                alert("进入到success方法");--%>
            <%--                alert(data.id + " " + data.name + " " + data.birthday);--%>
            <%--            }--%>
            <%--        })--%>
            <%--    })--%>
            <%--});--%>
        </script>
    </head>
    <body>
        <button id="btn" onclick="test()">前端通过Ajax发送JSON数据到后端</button>
    </body>
</html>
